﻿{extend name="layout/base" /}

{block name="meta"}
{__block__}
<!-- quick_view_popup CSS -->
<link rel="stylesheet" href="__ADDON__/__STYLE__/css/quick_view_popup.css" type="text/css">

<style>

</style>
{/block}
{block name="body"}
<body class="cms-index-index">
{/block}

{block name="main"}
<div id="quick_view_popup-overlay"></div>
<div style="display: block;" id="quick_view_popup-wrap">
  <div id="quick_view_popup-outer">
    <div id="quick_view_popup-content">
      <div style="width:auto;height:auto;overflow: auto;position:relative;">
        <div class="product-view-area">
          <div class="product-big-image col-xs-12 col-sm-5 col-lg-5 col-md-5">
            {if $goods['goodsstatus']}<div class="icon-sale-label sale-left">{:__("Sale")}</div>{/if}
            <div class="large-image">
              <a href="{$goods['goodsimg']}" class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20">
                <img class="zoom-img" src="{$goods['goodsimg']}" alt="{$goods['goodsname']}">
              </a>
            </div>
            <div class="flexslider flexslider-thumb">
              <ul class="previews-list slides">
                {volist name="$goods['gallery']" id='vo'}
                <li>
                  <a href='{$vo}' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '{$vo}' ">
                    <img src="{$vo}" alt = "{$goods['goodsname']}"/>
                  </a>
                </li>
                {/volist}
              </ul>
            </div>

            <div class="product-cart-option">
              <ul>
                <li>
                  {if ($goods['favGood']>0)}
                  <a href='javascript:void(0);' onclick='cancelFavorite(this,"goods",{$goods["id"]},{$goods["favGood"]})'><i class="fa fa-heart"></i><span>{:__("Favourited")}</span></a>
                  {else}
                  <a href='javascript:void(0);' onclick='addFavorite(this,"goods",{$goods["id"]})' ><i class="fa fa-heart-o"></i><span>{:__("Favourite")}</span></a>
                  {/if}
                </li>
                <li>
                  <a href="javascript:void(0);" onclick="javascript:contrastGoods(1,{$goods['id']},1)"><i class="fa fa-retweet"></i><span>{:__("Compare")}</span></a>
                </li>
                <li>
                  <a href="{:url('addons/mall/informs/inform','id='.$goods['id'])}" ><i class="fa fa-shield"></i><span>{:__("Inform")}</span></a>
                </li>
              </ul>
            </div>

          </div>
          <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">
            <div class="product-details-area">
              <div class="product-name">
                <h1>{$goods['goodsname']}</h1>
              </div>
              <div class="price-box">
                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> ￥{$goods['shopprice']} </span> </p>
                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> ￥{$goods['marketprice']} </span> </p>
              </div>
              <div class="ratings">评分:
                <div class="rating">
                  {for start="0" end="$goods['raty']['totalScore']"}
                  <i class="fa fa-star"></i>
                  {/for}
                  {for start="1" end="6-$goods['raty']['totalScore']"}
                  <i class="fa fa-star-o"></i>
                  {/for}
                </div>
                <p class="rating-links">  {:__("Review")}:<span>  {$goods['appraisenum']}</span> </p>
                <p class="availability in-stock pull-right">{:__("Salenum")}: <span>  {$goods['salenum']}</span>{$goods['goodsunit']} </p>
              </div>
              <div class="short-description">
                <p> {$goods['goodstips']}</p>
              </div>
              <div class="short-description">
                <p> 服务提供:
                  <a target='_blank' href="{:addon_url('mall/shop/detail',array('ids'=>$goods['shop']['id']))}">{$goods['shop']['name']}</a>
                </p>
              </div>
              {if !empty($goods['spec'])}
              <div class="product-color-size-area">
                {volist name="$goods['spec']" id='vo'}
                <div class="size-area">
                  <h2 class="saider-bar-title">{$vo['name']}</h2>
                  <div class="size">
                    <ul>
                      {volist name="$vo['list']" id='vo2'}
                      {if $vo2['itemimg']!=''}
                      <li class='j-option img' data-val="{$vo2['itemId']}" style='width:30px;height:30px;padding:0px;'>
                        <img class="cloudzoom-gallery" width="28" height="26"
                             src="{$vo2['itemimg']}"
                             data-cloudzoom="useZoom: '.cloudzoom',
                             image:'{$vo2['itemimg']}',
                             zoomImage:'{$vo2['itemimg']}' "
                             title="{$vo2['itemname']}" alt="{$vo2['itemname']}"/><i></i>
                      </li>
                      {else}
                      <li class='j-option' data-val="{$vo2['itemId']}">{$vo2['itemname']}<i></i></li>
                      {/if}
                      {/volist}
                    </ul>
                  </div>
                </div>
                {/volist}
              </div>
              {/if}
              <div class="product-variation">
                <form action="#" method="post">
                  <div class="cart-qty">
                    <div class="cart-plus-minus">
                      <label for="qty">{:__("Qty")}:</label>
                      <div class="numbers-row">
                        <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>
                        <input type="text" class="qty" title="Qty" value="1" maxlength="12" id="qty" name="qty">
                        <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>
                      </div>
                    </div>
                    <div class="availability in-stock pull-right">{:__("Stock")}: <span>{$goods['goodsstock']}</span>{$goods['goodsunit']}</div>
                  </div>
                  <div class="cart-buttons">
                    <button class="button pro-add-to-cart" title="{:__('Add to Cart')}" type="button"><span><i class="fa fa-shopping-cart"></i> {:__('Add to Cart')}</span></button>
                    <button class="button pro-shop-now pull-right" title="{:__('Add to Cart')}" type="button"><span><i class="fa fa-money"></i> {:__('Shop now')}</span></button>
                  </div>
                </form>
              </div>
              <div class="product-cart-option">
                <ul>
                  <li class="social-network fb"><a title="{:__('Share to %s',__('Wechat'))}" target="_blank" href="https://www.facebook.com/"><i class="fa fa-wechat"></i></a></li>
                  <li class="social-network googleplus"><a title="{:__('Share to %s',__('Alipay'))}" target="_blank" href="https://plus.google.com/"><i class="fa icon iconfont iconfont-alipay"><span class="icon iconfont icon-alipay"></span></i></a></li>
                  <li class="social-network tw"><a title="{:__('Share to %s',__('QQ'))}" target="_blank" href="https://twitter.com/"><i class="fa fa-qq"></i></a></li>
                  <li class="social-network linkedin"><a title="{:__('Share to %s',__('Weibo'))}" target="_blank" href="https://www.pinterest.com/"><i class="fa fa-weibo"></i></a></li>
                  <li class="social-network instagram"><a title="{:__('Share to %s',__('Baidu'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-baidu"></span></i></a></li>
                  <li class="social-network rss"><a title="{:__('Share to %s',__('Github'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-github"></span></i></a></li>
                  <li class="social-network linkedin"><a title="{:__('Share to %s',__('Jingdong'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-jingdong"></span></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a style="display: inline;" id="quick_view_popup-close" href="index.html"><i class="fa fa-times-circle"></i></a> </div>
</div>
  {/block}

  {block name="js"}
  {__block__}
<script type="text/javascript" src="__ADDON__/__STYLE__/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="__ADDON__/__STYLE__/js/countdown.js"></script>
<script type="text/javascript" src="__ADDON__/__STYLE__/js/cloud-zoom.js"></script>
  {/block}
